<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-for</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="root">
    <ul>
      <li v-for="(li,index) in mapList">
        {{index}} - {{li}}
      </li>
    </ul>
    <ul>
      <li v-for="(value,key,index) in obj">
        {{index}} - {{key}} - {{value}}
      </li>
    </ul>
    <ul>
      <li v-for="p in products">
        <span v-for="item in p">
          {{item}}
        </span>
      </li>
    </ul>
    <div>
      <template v-for="v in 10">
        <div>{{v}}hello</div>
        <div>{{v}}world</div>
      </template>
    </div>
    <ul>
      <my-li v-for="v in 10" :key="v" />
    </ul>
  </div>
  <script>
    Vue.component('my-li', {
      template: `<li>hello</li>`
    })

    Vue.config.productionTip = false
    var vm = new Vue({
      el: '#root',
      data: {
        list: [
          'aaa',
          'bbb',
          'ccc'
        ],
        obj: {
          x: 98,
          y: 99, 
          z: 100
        },
        products: [
          [
            'iphone', 200
          ],
          [
            'iphone12', 8000
          ]
        ]
      },

      computed: {
        mapList() {
          return this.list.map((value) => {
            return value + '!!!'
          })
        }
      },

      mounted() {
        // this.list[0] = 'aaaaaa'
        // this.$forceUpdate()
        // this.$set(this.list, 0, 'aaaaaa')
        // Vue.set(this.list, 0, 'aaaaaa')
        // this.list.splice(0, 1, 'bbbbbbbb')
        // this.list.push('ddd')
        // this.list.length = 0
        // this.list.splice(0, this.list.length)

        this.$set(this.obj, 'w', 10000)
      },
    })
  </script>
</body>
</html>